<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Find Photos on Flickr (Custom Formatting, YQL Source)</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Find Photos on Flickr (Custom Formatting, YQL Source)</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>
This example uses the Flickr Search API (via YQL) to allow the user to select photo results based on a search query. After each photo is selected, it's added to the collection of photos displayed below the input field.
</p>

<p>
A custom <code>resultFormatter</code> is used to format the Flickr results in the AutoComplete dropdown list, and a custom <code>select</code> event handler is used to override the default selection logic.
</p>
</div>

<div class="example">
    <style scoped>
  #ac-input { width: 300px; }

  #photos {
    border: 1px solid #cfcfcf;
    list-style: none;
    margin: 1.5em 0 0;
    padding: 6px;
  }

  #photos li {
    display: inline-block;
    list-style: none;

    /* fake inline-block for IE<8 */
    zoom: 1;
    *display: inline;
  }

  #photos .empty { font-style: italic; }

  #photos .photo {
    margin: 5px;
    text-align: center;
    width: 100px;
  }

  #photos .photo img {
    border: 1px solid #000;
    vertical-align: top;
  }

  .result {
    margin: 2px 0;
    zoom: 1;
  }

  .result:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
  }

  .result .photo {
    height: 32px;
    float: left;
    margin-right: 6px;
    width: 32px;
  }

  .result .title { vertical-align: top; }
</style>

<div id="demo" class="yui3-skin-sam">
  <label for="ac-input">Search Flickr:</label><br>
  <input id="ac-input" type="text">

  <ul id="photos">
    <li class="empty">No photos selected.</li>
  </ul>
</div>

<script>
YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
  var inputNode  = Y.one('#ac-input'),
      photosNode = Y.one('#photos');

  // Constructs an image URL for the Flickr photo represented by the given
  // AutoComplete result object.
  function getImageUrl(result, size) {
    if (!size) { size = 's'; }

    return Y.Lang.sub(
      'http://farm{farm}.static.flickr.com/{server}/{id}_{secret}_' + size + '.jpg',
      result.raw
    );
  }

  inputNode.plug(Y.Plugin.AutoComplete, {
    maxResults: 5,
    resultHighlighter: 'wordMatch',
    resultTextLocator: 'title',
    source: 'select * from flickr.photos.search where text="{query}" limit {maxResults}',

    // Custom result formatter for Flickr results.
    resultFormatter: function (query, results) {
      return Y.Array.map(results, function (result) {
        return '<div class="result">' +
                 '<img class="photo" src="' + getImageUrl(result) + '" alt="thumbnail">' +
                 '<span class="title">' + result.highlighted + '</span>' +
               '</div>';
      });
    }
  });

  // After a photo is selected, add it to the collection.
  inputNode.ac.on('select', function (e) {
    var result = e.result;

    // Prevent the default select handler so we can provide our own selection
    // behavior instead.
    e.preventDefault();

    inputNode.select();
    inputNode.ac.hide();

    // Remove the 'No photos selected' message if it exists.
    photosNode.all('.empty').remove();

    // Append a new list item containing the selected photo.
    photosNode.append(
      '<li class="photo">' +
        '<img src="' + getImageUrl(result, 't') +
            '" alt="' + result.raw.title + '" title="' + result.raw.title + '">' +
      '</li>'
    );
  });
});
</script>

</div>

<h2>HTML</h2>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Search Flickr:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;

  &lt;ul id=&quot;photos&quot;&gt;
    &lt;li class=&quot;empty&quot;&gt;No photos selected.&lt;&#x2F;li&gt;
  &lt;&#x2F;ul&gt;
&lt;&#x2F;div&gt;</pre>


<h2>CSS</h2>

<pre class="code prettyprint">#ac-input { width: 300px; }

#photos {
  border: 1px solid #cfcfcf;
  list-style: none;
  margin: 1.5em 0 0;
  padding: 6px;
}

#photos li {
  display: inline-block;
  list-style: none;

  &#x2F;* fake inline-block for IE&lt;8 *&#x2F;
  zoom: 1;
  *display: inline;
}

#photos .empty { font-style: italic; }

#photos .photo {
  margin: 5px;
  text-align: center;
  width: 100px;
}

#photos .photo img {
  border: 1px solid #000;
  vertical-align: top;
}

.result {
  margin: 2px 0;
  zoom: 1;
}

.result:after {
  clear: both;
  content: &#x27;.&#x27;;
  display: block;
  height: 0;
  visibility: hidden;
}

.result .photo {
  height: 32px;
  float: left;
  margin-right: 6px;
  width: 32px;
}

.result .title { vertical-align: top; }</pre>


<h2>JavaScript</h2>

<pre class="code prettyprint">YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
  var inputNode  = Y.one(&#x27;#ac-input&#x27;),
      photosNode = Y.one(&#x27;#photos&#x27;);

  &#x2F;&#x2F; Constructs an image URL for the Flickr photo represented by the given
  &#x2F;&#x2F; AutoComplete result object.
  function getImageUrl(result, size) {
    if (!size) { size = &#x27;s&#x27;; }

    return Y.Lang.sub(
      &#x27;http:&#x2F;&#x2F;farm{farm}.static.flickr.com&#x2F;{server}&#x2F;{id}_{secret}_&#x27; + size + &#x27;.jpg&#x27;,
      result.raw
    );
  }

  inputNode.plug(Y.Plugin.AutoComplete, {
    maxResults: 5,
    resultHighlighter: &#x27;wordMatch&#x27;,
    resultTextLocator: &#x27;title&#x27;,
    source: &#x27;select * from flickr.photos.search where text=&quot;{query}&quot; limit {maxResults}&#x27;,

    &#x2F;&#x2F; Custom result formatter for Flickr results.
    resultFormatter: function (query, results) {
      return Y.Array.map(results, function (result) {
        return &#x27;&lt;div class=&quot;result&quot;&gt;&#x27; +
                 &#x27;&lt;img class=&quot;photo&quot; src=&quot;&#x27; + getImageUrl(result) + &#x27;&quot; alt=&quot;thumbnail&quot;&gt;&#x27; +
                 &#x27;&lt;span class=&quot;title&quot;&gt;&#x27; + result.highlighted + &#x27;&lt;&#x2F;span&gt;&#x27; +
               &#x27;&lt;&#x2F;div&gt;&#x27;;
      });
    }
  });

  &#x2F;&#x2F; After a photo is selected, add it to the collection.
  inputNode.ac.on(&#x27;select&#x27;, function (e) {
    var result = e.result;

    &#x2F;&#x2F; Prevent the default select handler so we can provide our own selection
    &#x2F;&#x2F; behavior instead.
    e.preventDefault();

    inputNode.select();
    inputNode.ac.hide();

    &#x2F;&#x2F; Remove the &#x27;No photos selected&#x27; message if it exists.
    photosNode.all(&#x27;.empty&#x27;).remove();

    &#x2F;&#x2F; Append a new list item containing the selected photo.
    photosNode.append(
      &#x27;&lt;li class=&quot;photo&quot;&gt;&#x27; +
        &#x27;&lt;img src=&quot;&#x27; + getImageUrl(result, &#x27;t&#x27;) +
            &#x27;&quot; alt=&quot;&#x27; + result.raw.title + &#x27;&quot; title=&quot;&#x27; + result.raw.title + &#x27;&quot;&gt;&#x27; +
      &#x27;&lt;&#x2F;li&gt;&#x27;
    );
  });
});</pre>


<h2>Complete Example Source</h2>

<pre class="code prettyprint">&lt;style scoped&gt;
  #ac-input { width: 300px; }

  #photos {
    border: 1px solid #cfcfcf;
    list-style: none;
    margin: 1.5em 0 0;
    padding: 6px;
  }

  #photos li {
    display: inline-block;
    list-style: none;

    &#x2F;* fake inline-block for IE&lt;8 *&#x2F;
    zoom: 1;
    *display: inline;
  }

  #photos .empty { font-style: italic; }

  #photos .photo {
    margin: 5px;
    text-align: center;
    width: 100px;
  }

  #photos .photo img {
    border: 1px solid #000;
    vertical-align: top;
  }

  .result {
    margin: 2px 0;
    zoom: 1;
  }

  .result:after {
    clear: both;
    content: &#x27;.&#x27;;
    display: block;
    height: 0;
    visibility: hidden;
  }

  .result .photo {
    height: 32px;
    float: left;
    margin-right: 6px;
    width: 32px;
  }

  .result .title { vertical-align: top; }
&lt;&#x2F;style&gt;

&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Search Flickr:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;

  &lt;ul id=&quot;photos&quot;&gt;
    &lt;li class=&quot;empty&quot;&gt;No photos selected.&lt;&#x2F;li&gt;
  &lt;&#x2F;ul&gt;
&lt;&#x2F;div&gt;

&lt;script&gt;
YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
  var inputNode  = Y.one(&#x27;#ac-input&#x27;),
      photosNode = Y.one(&#x27;#photos&#x27;);

  &#x2F;&#x2F; Constructs an image URL for the Flickr photo represented by the given
  &#x2F;&#x2F; AutoComplete result object.
  function getImageUrl(result, size) {
    if (!size) { size = &#x27;s&#x27;; }

    return Y.Lang.sub(
      &#x27;http:&#x2F;&#x2F;farm{farm}.static.flickr.com&#x2F;{server}&#x2F;{id}_{secret}_&#x27; + size + &#x27;.jpg&#x27;,
      result.raw
    );
  }

  inputNode.plug(Y.Plugin.AutoComplete, {
    maxResults: 5,
    resultHighlighter: &#x27;wordMatch&#x27;,
    resultTextLocator: &#x27;title&#x27;,
    source: &#x27;select * from flickr.photos.search where text=&quot;{query}&quot; limit {maxResults}&#x27;,

    &#x2F;&#x2F; Custom result formatter for Flickr results.
    resultFormatter: function (query, results) {
      return Y.Array.map(results, function (result) {
        return &#x27;&lt;div class=&quot;result&quot;&gt;&#x27; +
                 &#x27;&lt;img class=&quot;photo&quot; src=&quot;&#x27; + getImageUrl(result) + &#x27;&quot; alt=&quot;thumbnail&quot;&gt;&#x27; +
                 &#x27;&lt;span class=&quot;title&quot;&gt;&#x27; + result.highlighted + &#x27;&lt;&#x2F;span&gt;&#x27; +
               &#x27;&lt;&#x2F;div&gt;&#x27;;
      });
    }
  });

  &#x2F;&#x2F; After a photo is selected, add it to the collection.
  inputNode.ac.on(&#x27;select&#x27;, function (e) {
    var result = e.result;

    &#x2F;&#x2F; Prevent the default select handler so we can provide our own selection
    &#x2F;&#x2F; behavior instead.
    e.preventDefault();

    inputNode.select();
    inputNode.ac.hide();

    &#x2F;&#x2F; Remove the &#x27;No photos selected&#x27; message if it exists.
    photosNode.all(&#x27;.empty&#x27;).remove();

    &#x2F;&#x2F; Append a new list item containing the selected photo.
    photosNode.append(
      &#x27;&lt;li class=&quot;photo&quot;&gt;&#x27; +
        &#x27;&lt;img src=&quot;&#x27; + getImageUrl(result, &#x27;t&#x27;) +
            &#x27;&quot; alt=&quot;&#x27; + result.raw.title + &#x27;&quot; title=&quot;&#x27; + result.raw.title + &#x27;&quot;&gt;&#x27; +
      &#x27;&lt;&#x2F;li&gt;&#x27;
    );
  });
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="How to provide autocomplete suggestions from a local array.">
                                        <a href="ac-local.html">Basic Local Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a remote JSONP source.">
                                        <a href="ac-jsonp.html">Remote Data via JSONP</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a YQL query source.">
                                        <a href="ac-yql.html">Remote Data via YQL</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a DataSource instance.">
                                        <a href="ac-datasource.html">Remote Data via DataSource</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to implement delimited tag completion.">
                                        <a href="ac-tagging.html">Tag Completion Using Query Delimiters</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter.">
                                        <a href="ac-flickr.html">Find Photos on Flickr (Custom Formatting, YQL Source)</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use autocomplete-base to filter a set of existing items on a page.">
                                        <a href="ac-filter.html">Filter a Set of Existing Items on a Page</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
